<template>
  <div class="fml-nav-show ">
    <!-- 头部 -->
    <div class="fml-nav-header flex">
      <div class="fml-nav-log flex-start"></div>
      <div class="fml-nav-info flex flex-end flex-1 animated fadeInDown" >
        <p class="fml-person"><i class="iconfont icon-yonghu mr6"></i><span>欢迎登录，{{userInfo.name}}</span></p>
        <p class="fml-person" @click="logout" style="cursor: pointer;"><i class="el-icon-remove-outline mr6"  style="color:#F47A7A"></i><span>退出</span></p>
        <router-link to="/nav_menu"><i class="el-icon-back mr6"></i>返回导航页</router-link>
      </div>
    </div>
    <!-- 导航 -->
    <div class="fml-nav-bar  animated fadeInDown">
      <el-menu  class="el-menu-demo" mode="horizontal"  style="width:100%">
        <template v-for="(item,index) in topMenuList" >
          <el-menu-item @click="handleSelect(item.isSystem,item.url)" :index="item.url ||'/404'" :key="item.id" :data="item.isSystem" v-if="!item.child||item.child.length==0">{{item.objectName}}</el-menu-item>
          <el-submenu :index="String(index+1)" :key="item.id" v-if="item.child&&item.child.length>0">
            <template slot="title">{{item.objectName}}</template>
            <el-menu-item @click="handleSelect(child.isSystem,child.url)" :index="child.url||'/404'" v-for="child in item.child" :key="child.id">{{child.objectName}}</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </div>
    <!-- 主体 -->
    <div class="fml-nav-content">
      <!-- 通知公告 -->
      <div class="fml-nav-tab">
        <div class="fml-notice  animated fadeInLeft">
          <div class="fml-notice-menu flex">
            <p :class="noticeState==1?'active animated borderAnimate':''" @click="noticeHandle(1)">通知公告</p>
            <p :class="noticeState==2?'active animated borderAnimate':''"  @click="noticeHandle(2)">预警中心</p>
            <p :class="noticeState==3?'active animated borderAnimate':''"  @click="noticeHandle(3)">个人信息</p>
            <p class=" notice-more" @click="moreNotice(noticeState)">更多>></p>
          </div>
          <div class="fml-notice-box"  v-loading="noticeListLoading" element-loading-text="加载中" element-loading-background="rgba(0, 0, 0, 0.6)">
            <ul class="notice-ul" v-if="noticeList.length>0&&noticeState==1">
              <li class="flex" v-for="item in noticeList" :key="item.id" @click="handleNotice(item.id,noticeState)">
                <i style="font-size:20px;font-weight:800;color:#2F95FF">·</i>
                <div class="ellipsis flex-1 mr10 tl notice-div">{{item.title}}</div>
                <i>{{item.createDate}}</i></li>
            </ul>
            <p style="line-height:320px"  v-else >暂无数据</p>
          </div>
        </div>
        <div class="fml-notice-time  animated fadeInRight">
          <div class="notice-person flex">
            <div class="person-img flex-start">
              <img :src="userInfo.avatar?userInfo.avatar:personImg"/>
            </div>
            <div class="person-information tl flex-1 flex-start">
              <p>{{userInfo.name}}</p>
              <p>{{userInfo.alarm}}</p>
              <p>上次登录时间：{{userInfo.lastLoginDate}}</p>
            </div>
          </div>
          <div class="notice-time flex">
            <div class="fml-time-box" >
              <div class="time-div tc">{{todyDate.slice(8)}}</div>
              <div class="time-div1 tc">{{lunarDate.IMonthCn+''+lunarDate.IDayCn}}</div>
            </div>
            <div class="person-information flex-1">
              <p>{{todyDate}}<span class="time-span"></span>{{week}}</p>
              <p>{{lunarDate.gzYear+'年' + '【'+lunarDate.Animal+'年】'}}</p>
              <p>{{lunarDate.gzMonth+'月'}}<span class="time-span"></span>{{lunarDate.gzDay+'日'}}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 基础功能 -->
      <div class="fml-basic-func mt24  animated fadeInDown">
         <div class="fml-notice">
          <div class="fml-notice-menu flex">
            <p class="active">应用服务中心</p>
          </div>
          <div class="basic-func-setting" @click="personalSet">个人设置</div>
          <div class="fml-basic-box" v-loading="appLoading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.6)" v-if="appData.length>0">
            <ul class="basic-ul flex flex-wrap">
              <li  v-for="(item) in appData" :key="item.id" @click="appClick(item.isSystem,item.url)">
                <div class="basic-div-bg">
                  <div class="basic-img-bg">
                    <i  :class="item.icon?item.icon+' iconfont':'el-icon-setting'"></i>
                  </div>
                </div>
                <p>{{item.name}}</p>
              </li>
            </ul>
          </div>
          <div class="flex fml-basic-box" v-else>敬请期待</div>
        </div>
      </div>
       <!-- 服务工具 -->
      <div class="fml-basic-func mt24 animated fadeInLeft">
         <div class="fml-notice">
          <div class="fml-notice-menu flex">
            <p class="active">业务系统中心</p>
          </div>
          <div class="fml-basic-box" v-loading="businessLoading" element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中..." v-if="businessData.length>0">
            <ul class="basic-ul flex flex-wrap">
              <li  v-for="item in businessData" :key="item.id"  @click="businessClick(item.id,item.url,item.runingStatus)">
                 <!-- <el-badge :value="item.value" class="item" > / -->
                  <div class="basic-div-bg " :class="item.runingStatus==0?'fml-early-warning':''" >
                    <div class="basic-img-bg">
                      <i class="iconfont icon-yujing" v-if="item.runingStatus==0"></i>
                      <i class="iconfont" :class="item.icon||'el-icon-setting'" v-else></i>
                    </div>
                  </div>
                <!-- </el-badge>  -->
                <p>{{item.name}}</p>
              </li>
            </ul>
          </div>
          <div class="flex fml-basic-box" v-else>敬请期待</div>
        </div>
      </div>
       <!-- 标注数据统计 -->
       <div class="fml-basic-func mt24 animated fadeInDown">
         <div class="fml-notice">
          <div class="fml-notice-menu flex ">
            <p class="active">基础要素数据统计</p>
          </div>
          <div class="fml-basic-box" style="padding:10px 47px">
            <p class="tl" style="color:#fff">单位：条</p>
            <div id="analy-column" ref="analyColumn" style="width: 100%;height:314px;"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 通告详情 -->
    <el-dialog
      title="公告详情"
      :visible.sync="noticeDialog"
      width="750px" >
      <div class="fml-notice-detail" v-loading="loadingNotice" element-loading-text="加载中,请稍后...">
        <h3 style="color:#2B2B2B;font-size:28px;">{{noticeData.title}}</h3>
        <div class="notice-word">
          <div class="notice-detail-content"> {{noticeData.context}}</div>
          <div class="flex"  style="justify-content:flex-start !important;align-items:flex-start !important;" v-if="noticeData.fileIds">
            <p>附件：</p>
            <div class="flex flex-cloumn flex-1 " style="justify-content:flex-start !important;align-items:flex-start !important;color:#0757EA">
              <a :href="internetFml+item.url" v-for="item in noticeData.files" :key="item.id">{{item.name+'.'+item.suffix}}</a>
            </div>
          </div>
        </div>
        <div class="fml-signature">
          <div class="flex"><p>&emsp;发布人：</p><div class="flex-1">{{noticeData.releaseName}}</div></div>
          <div class="flex"><p>发布单位：</p><div class="flex-1">{{noticeData.organName}}</div></div>
          <div class="flex"><p>发布时间：</p><div class="flex-1">{{noticeData.createDate}}</div></div>
        </div>
      </div>
    </el-dialog>
    <el-dialog  title="个人设置"
      :visible.sync="settingDialog"
      width="700px" height="613px">
      <div class="fml-setting" v-loading="loadingSetting" element-loading-text="加载中,请稍后..." v-if="settingDialog">
        <div class="fml-setting-box">
          <div class="setting-current">
            <p>当前应用</p>
            <ul class="setting-ul flex flex-wrap" v-if="appData.length>0">
              <li v-for="item in appData" :key="item.id" >
                <div class="setting-icon">
                  <i class="setting-common-icon iconfont " :class="item.icon || 'el-icon-setting'"></i>
                  <i class="setting-remove el-icon-remove-outline" @click="removeCurrent(item.id)"></i>
                </div>
                <p>{{item.name}}</p>
              </li>
            </ul>
            <p  style="line-height:100px" v-else>暂无</p>
          </div>
          <div class="setting-total flex">
            <div class="setting-total-left">
              <el-tree
                :props="settingProps"
                :load="loadNode"
                :expand-on-click-node="false"
                @node-click="nodeClick"
                :highlight-current="true"
                :accordion="true"
                lazy>
              </el-tree>
            </div>
            <div class="setting-total-right">
              <div class="setting-current">
                <p>所有应用</p>
                <ul class="setting-ul flex flex-wrap" v-if="currentData.length>0">
                  <template v-for="item in currentData">
                  <li  v-if="!item.check"  :key="item.id">
                    <div class="setting-icon">
                      <i class="setting-common-icon iconfont" :class="item.icon?item.icon:'el-icon-document'"></i>
                      <i class="setting-remove el-icon-circle-plus-outline"  @click="addCurrent(item.id)"></i>
                    </div>
                    <p>{{item.name}}</p>
                  </li>
                  </template>
                </ul>
                <p style="line-height:200px" v-else>暂无</p>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer mt24">
          <el-button @click="settingDialog=false" size="small" class=" cancel ">完 成</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import echarts from "echarts";
import { fmlCom, fmlCalendar, fmlRequest } from "../utils"
export default Vue.extend({
  data() {
    return{
      personImg:require('../static/tx.png'),//用户默认头像
      topMenuList:[],//头部菜单
      currentId:0,//当前树ID
      currentData:[],//当前所有应用
      settingProps: {
        children: 'child',
        label: 'name',
        isLeaf: 'leaf'
      },//个人设置树形菜单
      settingDialog:false,//设置弹窗
      loadingSetting:false,//个人设置
      loadingNotice:false,//通告详情加载
      noticeListLoading:false,//通知公告列表
      noticeList:[],//通知公告列表
      noticeData:{},//公告详情
      noticeDialog:false,//通告详情
      todyDate:fmlCom.formatTime((new Date()),2),//今天
      week:fmlCom.formatTime((new Date()),8),//星期几
      lunarDate:{},//天干地支记年月日 【】
      userInfo:{},
      activeIndex:'1',//导航
      noticeState:1,//通知公告
      appLoading:false,//
      businessLoading:false,//
      appData:[],//应用服务中心
      businessData:[],//业务系统中心
      businessSystem:[{name:'323',icon:'icon-shujuzhongxin',warning:true}],
      options: {
        grid: {
          top: "25px",
          left: "14px",
          right: "14px",
          bottom: "22px",
          containLabel: true
        },
        xAxis: {
          data: ['人口','地址','单位','标准代码','人口','地址','单位','标准代码'],
          axisLabel: {
            textStyle: {
              color: "#9DCFEC",
              fontSize:16
            },
            interval: 0, //0：全部显示，1：间隔为1显示对应类目，
            // rotate: 30 //倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
          },
          axisLine:{
            lineStyle:{
              color:'#53D4ED',
              width:1,//这里是为了突出显示加上的
            }
          } ,
          splitLine:{
            show:true,
            lineStyle:{
              color:'#5885FF'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
           axisTick: {
            show: false
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'#5885FF'
            }
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize:16
            }
          },
          axisLine:{
            lineStyle:{
              color:'#53D4ED',
              width:1,//这里是为了突出显示加上的
            }
          } ,
        },
        series: [
          {
            type: "bar",
            barWidth: 45,
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#fff",
                fontSize:14
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = [
                    "#00A0E9",
                    "#A4A6FB",
                    "#1BF4F4",
                    "#FFAD00",
                    "#FF9513",
                    "#68DD65",
                    "#FFD919",
                    "#65C5F0",
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            data: [16,14,23,6,20,10,8,5]
          }
        ]
      }
    }
  },
  watch:{
    settingDialog(){
      this.currentData=[]
    }
  },
  methods: {
    // 退出
    logout(){
      let url = this.$domain+ "/logout?Authentication=" + this.$store.state.Authentication
      sessionStorage.clear()
      window.location.href=url
      return
    },
    // 添加应用
    async addCurrent(id){
      this.loadingSetting=true
      let [err,result]=await this.$fetchService.fetchPost({permissionsIds:id},'addAppCenter',false)
      if(err){
        this.loadingSetting=false
        return this.$message({type:'error',message:err.message||'添加失败',showClose:true})
      }
      this.loadingSetting=false
      this.appCenter()
      fmlRequest.getMenu(this,this.currentId,4,true).then(result => {
        this.currentData=result
      });
    },
    // 删除应用
    async removeCurrent(id){
      this.loadingSetting=true
      let [err,result]=await this.$fetchService.fetchDelete({id:id},'appCenter',true)
      if(err){
        this.loadingSetting=false
        return this.$message({type:'error',message:err.message||'删除失败',showClose:true})
      }
      this.loadingSetting=false
      this.appCenter()
       fmlRequest.getMenu(this,this.currentId,4,true).then(result => {
        this.currentData=result
      });
    },
    nodeClick(nodeObj,node,event){
      fmlRequest.getMenu(this,nodeObj.id,4,true).then(result => {
        this.currentId=nodeObj.id
        this.currentData=result.filter(item=>!item.check)
      });
    },
    //树形懒加载
    loadNode(node, resolve) {
      let that=this
      if (node.level === 0) {
       resolve([{ name: '治安要素管理平台',id:0,child:[] }]);
       return
      }
      setTimeout(() => {
        fmlRequest.getMenu(this,node.data.id,4,true).then(result => {
          this.currentId=node.data.id
          // this.currentData=result
          let fmlres=result.filter(item=>!item.leaf)
          resolve(fmlres);
        });
      }, 500);
    },
    // 个人设置单击
    personalSet(){
      this.settingDialog=true
    },
    //头部菜单
    async topMenu(){
      let [err,res]=await this.$fetchService.fetchGet({},'topMenu',false)
      if(err){
        this.$message({type:'error',message:err.message||'获取菜单导航失败'})
      } else{
        this.topMenuList=res.data
      }
    },
    // 应用系统中心单击
    appClick(isSystem,url){
      if(!url){
        this.$router.push({path:'/404'})
        return
      }
      if(isSystem){
        this.$router.push({name:'sideBar',params:{url:url?url:this.$store.state.menuTree[0]}})
      }else{
       window.open(url)
      }
    },
    //业务模块中心单击
    businessClick(id,url,status){
      if(!url){
        this.$router.push({path:'/404'})
        return
      }
      if(status==0){
        return this.$message({type:'warning',message:'当前模块为异常状态，暂不可访问！',showClose:true})
      }
      if(id==2){
        this.$router.push({name:'sideBar',params:{url:url?'/security_factor'+url:'/404'}})
      }else{
       window.open(url)
      }
    },
    // 用户信息
    async userList(){
      let [err,result]=await this.$fetchService.fetchGet({},'userInfo',false)
      if(err) {
        this.$message({type:'error',message:err.message||'获取用户信息失败',showClose:true})
      }else{
        this.userInfo=result.data
        sessionStorage.setItem('userInfo',result.data);
        this.$store.commit("setUserInfo", result.data);
      }

    },
    //导航
    handleSelect(isSystem, url) {
      if(!url){
        this.$router.push({path:'/404'})
        return
      }
      if(String(isSystem)=='1'){
        this.$router.push({path:url?'/security_factor'+url:'/404'})
      }else{
        window.open(url+'?Authentication='+this.$store.state.Authentication)
      }
    },
    // 当前通告 state 1通告 2预警 3个人
    noticeHandle(state){
      this.noticeState=state
    },
    // 当前子通告单击事件
    async handleNotice(id,state){
      if(state==1){
        this.loadingNotice=true
        this.noticeDialog=true
        let [err,result]=await this.$fetchService.fetchGet({id:id},'noticeList',true)
        if(err){
          this.loadingNotice=false
          this.$message({type:'error',message:err.message||'请求失败',showClose:true})
          this.noticeDialog=false
        }
        this.loadingNotice=false
        this.noticeData=result.data
      }
    },
    //数据统计
    getPhotoData(){
      let dom = document.getElementById("analy-column");
      let myChart = echarts.init(dom);
      myChart.setOption(this.options); //企业性质
    },
    // 首页通告
    async getNotice(pageIndex){
      this.noticeListLoading=true
      let [err,result]=await this.$fetchService.fetchGet({pageIndex:pageIndex,pageSize:7,status:1},'noticeList',false)
      if(err){
        this.noticeListLoading=false
        this.$message({type:'error',message:err.message||'请求失败',showClose:true})
      }else{
        this.noticeListLoading=false
        this.noticeList=result.data
        this.total=result.totalPage
      }
    },
    moreNotice(state){
      if(state==1){
        this.$router.push({name:'sideBar',params:{url:'/security_factor/notice_announcements'}})
      }
    },
    // 首页应用中心
    async appCenter(){
      this.appLoading=true
      let [err,result]=await this.$fetchService.fetchGet({},'appCenter',false)
      if(err){
        this.appLoading=false
        this.$message({type:'error',message:err.message||'请求失败'})
      } else{
        this.appLoading=false
        this.appData=result.data
      }
    },
    // 首页业务管理中心
    async businessCenter(){
      this.businessLoading=true
      let [err,result]=await this.$fetchService.fetchGet({},'navList',false)
      if(err){
        this.businessLoading=false
        this.$message({type:'error',message:err.message||'请求失败'})
      } else{
        let data=[]
        result.data.map(item=>{
          if(item.id!=2&&item.status!=0){
            data.push(item)
          }
        })
        this.businessData=data
        this.businessLoading=false
      }
    }
  },
  mounted(){
    let date=fmlCom.formatTime((new Date()),7)
    this.lunarDate=fmlCalendar.solar2lunar(date[0],date[1],date[2])
    this.$nextTick(() => {
      this.getPhotoData();
    });
  },
  created(){
    this.topMenu()
    this.userList()
    this.appCenter()
    this.businessCenter()
    this.getNotice(1)
  }
})
</script>
<style lang="scss" scoped>
  @import "../assets/css/nav.scss";
</style>
